<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在线富文本编辑器</title>
		<link href="./css/wangEditor.css" rel="stylesheet">
		<style>
		  #editor—wrapper {
		    border: 1px solid #ccc;
		    z-index: 100; /* 按需定义 */
		  }
		  #toolbar-container { border-bottom: 1px solid #ccc; }
		  #editor-container { height: 500px; }
		</style>
	</head>
	<body>
		<div id="editor—wrapper">
		    <div id="toolbar-container"><!-- 工具栏 --></div>
		    <div id="editor-container"><!-- 编辑器 --></div>
		</div>
		<div>
			<button id="htmlBt">获取html</button>
			<button id="jsonBt">获取json</button>
		</div>
		<script src="js/jquery-3.6.0.js"></script>
		<script src="./js/wangEditor.js"></script>
		<script>
		const { createEditor, createToolbar } = window.wangEditor
		const editorConfig = {
		    placeholder: '请输入内容……',
			MENU_CONF: {
				uploadImage: {
					fieldName:'file',
					server: 'http://localhost:7025/api/upload',
					// withCredentials: true,
				}
			}
		}
		
		const editor = createEditor({
		    selector: '#editor-container',
		    html: '<p><br></p>',
		    config: editorConfig,
		    mode: 'default', // or 'simple'
		})
		
		const toolbarConfig = {}
		
		const toolbar = createToolbar({
		    editor,
		    selector: '#toolbar-container',
		    config: toolbarConfig,
		    mode: 'default', // or 'simple'
		})
		const curToolbarConfig = toolbar.getConfig()
		$("#htmlBt").click(function(){
			$.ajax({
				url: "http://localhost:7025/api/html2word",
				type: "POST",
				contentType:"application/json",
				data: editor.getHtml(),
				success: function(data){
					console.log("data",data)
				}
			})
		})
		$("#jsonBt").click(function(){
			$.ajax({
				url: "http://localhost:7025/api/generate",
				type: "POST",
				contentType:"application/json",
				data: JSON.stringify(editor.children),
				success: function(data){
					console.log("data",data)
				}
			})
		})
		</script>
	</body>
</html>
